<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 学习第二天</title>
</head>
<body>
    <h1>Day2:HTML学习</h1>
    <hr>
    <h3>列表</h3>
    <h4>多种无序列表</h4>
    <ul style="list-style-type: circle">
        <li>你</li>
        <li>我</li>
        <li>他</li>
    </ul>
    <ul style="list-style-type: square">
        <li>你</li>
        <li>我</li>
        <li>他</li>
    </ul>
    <ul>
        <li>你</li>
        <li>我</li>
        <li>他</li>
    </ul>
    <p><sub>(默认是实心圆点)</sub></p>
    <h4>多种有序列表</h4>
    <ol>
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
    <p><sub>(默认是数字排序)</sub></p>
    <ol type="A">
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
    <ol type="a">
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
    <ol type="I">
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
    <ol type="i">
        <li>打开冰箱</li>
        <li>把大象放进去</li>
        <li>关上冰箱</li>
    </ol>
    <h4>列表嵌套</h4>
    <ul>
        <li>英语作业</li>
        <ol>
            <li>背单词</li>
            <li>做卷子</li>
        </ol>
        <li>数学作业</li>
        <ol>
            <li>复习公式</li>
            <li>预习下一章</li>
        </ol>
    </ul>
    <h4>自定义列表练习</h4>
    <dl>
        <dt>英语作业</dt>
        <dd>背单词</dd>
        <dd>做卷子</dd>
        <dt>数学作业</dt>
        <dd>复习公式</dd>
        <dd>预习下一章</dd>
    </dl>
    <h3>html区块</h3>
    <div style="color: blueviolet;text-align: center;">
        <h4>这是div里的一个标题</h4>
        <p>这是一个div段落</p>
        <p>送你一朵小<span style="color: red;font-weight: bold;">红</span>花</p>
    </div>
    <h3>html 布局</h3>
    <div id="container" style="width:500px">
     <div id="header" style="background-color: peachpuff;text-align: center;">
         <h1 style="margin-bottom: 0%;">我的网站</h1>
     </div>  
     <div id="menu" style="background-color: palegoldenrod;height: 200px;width: 100px;float:left ;">
        <ul style="list-style-type: none;">
            <li><b>首页</b></li>
            <li>关于我</li>
            <li>联系我</li>
        </ul>
     </div> 
     <div id="content" style="background-color: snow;height: 200px;width: 400px;float: left;text-align: center;">
        <p><big>手捏青苗种福田，低头便见水中天。<br>六根清净方成稻，后退原来是向前。</big></p>
     </div>
     <div id="footer" style="background-color: azure;clear: both;text-align: center;">版权归属：水穷天杪</div>
    </div>
    
</body>
</html>